<template>
  <div ref="partolTree" class="partolTree needScrollBar">
    <div v-if="needHeader" ref="partolTreeHeader" class="partolTree-header">
      <slot name="header">header</slot>
    </div>
    <!-- <el-scrollbar style="height:80%"> -->
    <div class="partolTree-content" :style="{height:contentHeight+'px'}">
      <!-- <el-scrollbar style="height:100%" ref="scrollbar"> -->
      <el-tree
        ref="tree"
        :data="data"
        :show-checkbox="showCheckbox"
        node-key="code"
        :default-expanded-keys="defaultExpandedKeys"
        :default-checked-keys="defaultCheckedKeys"
        :default-expand-all="false"
        :props="defaultProps"
        :class="{pdTree:isParentCheck}"
        :check-strictly="checkStrictly"
        :filter-node-method="filterNode"
        :check-on-click-node="true"
        :expand-on-click-node="false"
        :style="{height:contentHeight+'px'}"
        @check="checkFun"
        @check-change="checkChangeFun"
        @node-click="nodeClickFun"
      />
      <!-- </el-scrollbar> -->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isParentCheck: {
      type: Boolean,
      default: true
    },
    isCheckMutile: {
      type: Boolean,
      default: true
    },
    data: {
      type: Array,
      default: () => []
    },
    defaultProps: {
      type: Object,
      default: () => ({})
    },
    filterNode: {
      type: Function
    },
    defaultCheckedKeys: {
      type: Array,
      default: () => []
    },
    defaultExpandedKeys: {
      type: Array,
      default: () => []
    },
    needHeader: {
      type: Boolean,
      default: true
    },
    showCheckbox: {
      type: Boolean,
      default: true
    },
    checkStrictly: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      defaultCheck: [],
      key: 0,
      contentHeight: 300
    }
  },
  mounted() {
    if (this.$refs.partolTree) {
      const headerHeight = this.$refs.partolTreeHeader ? this.$refs.partolTreeHeader.clientHeight : 0
      this.contentHeight = this.$refs.partolTree.clientHeight - headerHeight
    }
  },
  methods: {
    checkChangeFun(data, checked, indeterminate) {
      if (checked && !this.isCheckMutile) {
        const arr = [data.code]
        this.$refs.tree.setCheckedKeys(arr)
      }
      this.$emit('checkChangeFun', data)
    },
    getCheckedNodesFun() {
      return this.$refs.tree.getCheckedNodes()
    },
    filter(args) {
      this.$refs.tree.filter(args)
    },
    nodeClickFun(data, node, ele) {
      this.$emit('nodeClick', { data, node, ele })
    },
    checkFun(data) {
      console.log(data)
      this.$emit('checkFun', data)
    }
  }
}
</script>

<style lang="less">
.partolTree {
  height: 100%;
  .partolTree-content {
    overflow: auto;
  }
  .partolTree-header {
    height: 60px;
    overflow: hidden;
  }
  /deep/ .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}
.pdTree {
  .el-tree-node {
    .is-leaf + .el-checkbox .el-checkbox__inner {
      display: inline-block;
    }
    .el-checkbox__input > .el-checkbox__inner {
      display: none;
    }
  }
}
</style>
